<template>
    <div class="wrapper">
			
			<!-- header部分 -->
			<header>
				<p>在线支付</p>
			</header>
			
			<!-- 订单信息部分 -->
			<h3>订单信息：</h3>
			<div class="order-info">
				<p>
					<!-- 商家名称 -->
					{{orders.business.businessName}}
					<i class="fa fa-caret-down" id="showBtn" @click="toshow()"></i>
				</p>
				<p>&#165;{{monery}}</p>
			</div>
			
			<!-- 订单明细部分 -->
			<ul class="order-detailet" id="detailetBox" v-show="isRight">
				<li v-for="(it,index) in orders.list" :key="index">
					<!-- 食品名称  *   数量 -->
					<p>{{it.food.foodName}} x{{it.quantity}}</p>
					<!-- 食品单价 -->
					<p>&#165;{{it.food.foodPrice}}</p>
				</li>
				<li>
					<p>配送费</p>
					<p>&#165;{{orders.business.deliveryPrice}}</p>
				</li>
			</ul>
			
			<!-- 支付方式部分 -->
			<ul class="payment-type">
				<li name='zhifu'>
					<img src="../assets/alipay.png">
					<input type="radio" name="check" class="fa fa-check-circle">
					<!-- <i class="fa fa-check-circle"></i> -->
				</li>
				<li name='zhifu'>
					<img src="../assets/wechat.png">
					<input type="radio" name="check"  checked=true class="fa fa-check-circle">
				</li>
			</ul>
			<div class="payment-button">
				<button @click="tocherk()">确认支付</button>
			</div>
			
			<!-- 底部菜单部分 -->
			<ul class="footer">
				<li onclick="location.href='index.html'">
					<i class="fa fa-home"></i>
					<p>首页</p>
				</li>
				<li>
					<i class="fa fa-compass"></i>
					<p>发现</p>
				</li>
				<li @click="toOrderlist()">
					<i class="fa fa-file-text-o"></i>
					<p>订单</p>
				</li>
				<li>
					<i class="fa fa-user-o"></i>
					<p>我的</p>
				</li>
			</ul>
		</div>	
</template>

<script>
export default {
    data(){
        return{
            user:{},
			isRight:true,
			monery:0,
			orderId:0,
			//不在orders中加对象,控制台报错,看着难受
			orders:{
				business:{}
			}
        }
    },

    created(){
       
		this.orderId = this.$getSessionStorage('orderId');
		//根据orderid查询订单
		this.$axios.post('OrdersController/getOrdersById',this.$qs.stringify({
            orderId:this.orderId
        })).then(response=>{
            this.orders = response.data;
			//上传订单
			this.$setSessionStorage('orders',this.orders)
        }).catch(error=>{
            console.log(error)
        })

		this.user = this.$getSessionStorage('user');
		this.monery = this.$getSessionStorage('monery');
    },

    methods:{
        toOrderlist(){
			//跳转订单明细
            this.$router.push({
					path:'/orderlist'
				})
        },
		//布尔类型取反
		toshow(){
			this.isRight = !this.isRight
		},

		tocherk(){
			this.$axios.post('OrdersController/payByOrderId',this.$qs.stringify({
            orderId:this.orderId
        })).then(response=>{
			if(response.data==1){
				alert('虚拟支付完成了')
				return;
			}else{
				alert('网络开小差了,再试一次吧!')
			}
        }).catch(error=>{
            console.log(error)
        })
			
		}
		

    },
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper{
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header{
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;
	
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

/****************** 订单信息部分 ******************/
.wrapper h3{
	margin-top: 12vw;
	box-sizing: border-box;
	padding: 4vw 4vw 0;
	
	font-size: 4vw;
	font-weight: 300;
	color: #999;
}
.wrapper .order-info{
	box-sizing: border-box;
	padding: 4vw;
	font-size: 4vw;
	color: #666;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.wrapper .order-info p:last-child{
	color: orangered;
}
/****************** 订单明细部分 ******************/
.wrapper .order-detailet{
	width: 100%;
}
.wrapper .order-detailet li{
	width: 100%;
	box-sizing: border-box;
	padding: 1vw 4vw;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.wrapper .order-detailet li p{
	font-size: 3vw;
	color: #666;
}

/****************** 支付方式部分 ******************/
.wrapper .payment-type{
	width: 100%;
}
.wrapper .payment-type li{
	width: 100%;
	box-sizing: border-box;
	padding: 4vw;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.wrapper .payment-type li img{
	width: 33vw;
	height: 8.9vw;
}
.wrapper .payment-type li .fa-check-circle{
	font-size: 5vw;
	color: #38CA73;
}
.wrapper .payment-button{
	width: 100%;
	box-sizing: border-box;
	padding: 4vw;
}
.wrapper .payment-button button{
	width: 100%;
	height: 10vw;
	border: none;
	/*去掉外轮廓线*/
	outline: none;
	border-radius: 4px;
	background-color: #38CA73;
	color: #fff;
}
/****************** 底部菜单部分 ******************/
.wrapper .footer{
	width: 100%;
	height: 14vw;
	border-top: solid 1px #DDD;
	background-color: #fff;
	
	position: fixed;
	left: 0;
	bottom: 0;
	
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.wrapper .footer li{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	color: #999;
	user-select: none;
	cursor: pointer;
}
.wrapper .footer li p{
	font-size: 2.8vw;
}
.wrapper .footer li i{
	font-size: 5vw;
}
</style>


